<template>
  <div class="preview-account-wrap">

    <section class="header">
      一些操作按钮 ------------
      <el-button @click="disableFruit">禁用</el-button>
    </section>

    <section class="title">
      头部标题 ------------
    </section>

    <!--         @selection-change="selectMultiRow"  -->
    <chino-dynamic-table
      :colDescObject="en2chDictionary"
      :constFormTheadOptions="constShow"
      :data="tableData"
      :formThead.sync="formThead"
      :formTheadOptions="allCol"
      :operator-obj="btns"
      ref="chino"
      v-loading="loading"
    >
    </chino-dynamic-table>

    <pagination
      :limit.sync="limit"
      :page.sync="page"
      :total="total"
      @pagination="pageChange"
      class="pagination-wrap"
    />
  </div>
</template>

<script>
  import ChinoDynamicTable from '@/components/mDynamicTable/ChinoDynamicTable'
  import Pagination from '@/components/Pagination/index'

  const simulatorFilter = (val,row,$index,colName) => {
    return `${val}--${JSON.stringify(row)}--${$index}--${colName}--`
  }

  export default {
    name: 'useDynamicExample',
    components: { Pagination, ChinoDynamicTable },
    data() {
      return {
        total: 33,
        page: 1,
        limit: 10,

        //  表格相关
        loading: false,
        btnObj: [
          {
            text: '新增',
            handleOperator: function(idx, row) {
              console.log(idx, row)
            },
            type: 'primary',
            size: 'mini'
          }
        ],
        tableData: [],
        allCol: ['name', 'apple', 'banana', 'orange', 'ccc', 'ddd', 'eee', 'fff', 'ggg'],  //  all dynamic col
        constShow: ['name', 'ccc', 'orange', 'ddd', 'eee', 'fff'],          //  const show header
        formThead: ['name', 'apple'], //  dynamic show header init and sync update
        en2chDictionary: [{ chName: '名字', engName: 'name' },
          { chName: '苹果', engName: 'apple', width: 300, filter: simulatorFilter },
          { chName: '香蕉', engName: 'banana', width: 300, filter: (val) => `${val} chino` },
          { chName: '橘子', engName: 'orange' }
        ],
        btns: [{
          text: '新增',
          handleOperator: (idx, row) => {
            console.log(idx, row)
          },
          type: 'primary',
          size: 'mini'
        }]
      }
    },
    created() {
      this.getData()
    },
    methods: {
      pageChange({ page, limit }) {
        console.log(page, limit)
      },
      getData() {
        this.loading = true
        //  模拟异步获取数据
        import(`./mockTableData`).then(({ tableData }) => {
          this.tableData = tableData  //  set table value
          this.loading = false  //  set load = false
        })

      },
      //  多选操作
      selectMultiRow(selection) {
        console.log('preview do handler => ')
        console.log(selection)

      },
      disableFruit() {
        //  do something

        //  then do close all user checked
        console.log(this.$refs.chino)
        this.$refs.chino.checkBoxCloseSelected()
      }

    }
  }
</script>

<style lang="scss" scoped>

  .preview-account-wrap {
    margin: 50px;

  }

</style>

